<template>
  <div>
    <div class="hint">
      <div>
        <p class="one">
          <span>技术服务费比例</span>
          是您的店铺产生订单的时候，我们会按照该比例扣取一定的手续费，这些手续费我们会通过其他形式返回给您和您的用户。
        </p>
        <p class="two">当然，如果您对现在的技术服务费不满意，可以申请变更。</p>
      </div>
    </div>
    <div class="select">
      <p>申请变更的服务费比例：</p>
      <picker
        class="proportionClass"
        @change="proportionChange"
        :range="item"
        range-key="val"
        :value="poundageVla"
      >
        <span>{{poundageRatio}}</span>
      </picker>
    </div>
    <button class="btn-color-blue updateBtn" @click="depositClick">确定变更</button>
  </div>
</template>

<script>
import {} from '@/utils'
import { FIND_SHOP_BASE_INFO, ADD_SHOP_CHANGE_APPLY_API } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      poundageRatio: '1%',
      poundageVla: 0.01,
      item: [],
      form: {}
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getShopBaseInfo()
  },
  methods: {
    proportionChange (e) {
      for (let i = 0; i < this.item.length; i++) {
        if (i === Number(e.target.value)) {
          this.poundageRatio = this.item[i].val
          this.poundageVla = i
        }
      }
    },
    getShopBaseInfo () {
      const vm = this

      // FIND_SHOP_BASE_INFO(vm.account.shopId)
      FIND_SHOP_BASE_INFO(vm.$cookie.get('account').shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.form = r.data.data
            let { poundageRatioStart, poundageRatioEnd } = r.data.data
            for (
              let i = poundageRatioStart * 100;
              i <= poundageRatioEnd * 100;
              i++
            ) {
              let obj = {}
              obj.key = i * 0.01
              obj.val = i + '%'
              vm.item.push(obj)
            }
            vm.init()
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    depositClick () {
      const vm = this
      vm._updateShopInfo()
    },
    _updateShopInfo () {
      const vm = this
      let params = {
        shopId: vm.form.shopId
      }
      if (vm.poundageRatio === '1%') {
        params.poundageRatio = vm.poundageVla
      } else {
        params.poundageRatio = vm.item[vm.poundageVla].key
      }
      // params.poundageRatio = vm.item[vm.poundageVla].key
      ADD_SHOP_CHANGE_APPLY_API(params)
        .then(r => {
          if (r.data.code === '0') {
            wx.showModal({
              title: '资料已提交成功',
              content:
                '我们会在1-3个工作日内处理您的申请若有问题请致电400-888-5115',
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: function (res) {
                if (res.confirm) {
                  vm.$cookie.set('account', params)
                  vm.$router.go(-1)
                }
              },
              fail: function (err) {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    init () {
      // this.poundageVla = '1%'
      // this.poundageRatio = this.$cookie.get('account').poundageRatio * 100 + '%'
      // console.log(this.poundageRatio)
      // for (let i = 0; i < this.item.length; i++) {
      //   if (this.poundageRatio === this.item[i].val) {
      //     this.poundageVla = i
      //   }
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.hint {
  width: 95%;
  margin: auto;
  border: 1px solid #dbd9d9;
  border-radius: 2px;
  font-size: 14px;
  div {
    padding: 20px;
    p {
      text-indent: 25px;
      line-height: 30px;
      color: #000;
      span {
        color: #e51c23;
      }
    }
  }
}
.select {
  width: 90%;
  margin: 20px auto;
  font-size: 12px;
  color: #000;
  display: flex;
  align-items: center;
  .proportionClass {
    span {
      width: 160px;
      height: 30px;
      border: 1px solid #999;
      display: block;
      border-radius: 5px;
      line-height: 30px;
      padding-left: 7px;
    }
  }
}
.btn {
  position: fixed;
  bottom: 50px;
  font-size: 14px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 220px;
  height: 50px;
  background: #626efd;
  color: #fff;
  border-radius: 0;
  line-height: 30px;
}
.updateBtn{
  width: 95%;
  margin: auto;
}
</style>
